<!--
	作者：2575202388@qq.com
	时间：2018-10-14
	描述：首页组件
-->

<template>
	<div style="background: #e9e9e9;height: auto;overflow: hidden;">
		 <div style="width: 98%; float: left; background:#eee;height:520px;margin-top:20px;margin-bottom:30px;margin-left:1%;margin-right:1%;">
		    <Card :bordered="false" style="height:530px;">
		        <p slot="title">
		         	<Icon type="ios-volume-up" style="color:#5bace8;font-size: 28px;"/>
		        	<span style="padding-left:2px;color:#333333;font-size: 14px;font-weight: normal;">班级数据统计</span>
		        	<Icon type="ios-more" style="color:#333333;font-size: 25px;float:right;"/>
		        </p>
		        <div>
		        	<Table stripe size="small" :loading="loading" :columns="columns" :data="newstatic">
						<Spin fix slot="loading">
							<Icon type="md-aperture" size=30 class="rotate"></Icon>
							<div style="width: 100px;color: #515a6e;">{{loadmsg}}</div>
						</Spin>
					</Table>
		        </div>
		    </Card>
		</div>  

		<div class="homeDiv" style="width: 48%;">
			<bar :newstatic="njtatic"></bar>
		</div>

	   <div class="homeDiv" style="width: 48%;">
			<static1 :newstatic="njtatic"></static1>
		</div>
	   
	    <div class="homeDiv" style="width: 48%;">
			<static2 :newstatic="njtatic"></static2>
		</div>
   
	   <div class="homeDiv" style="width: 48%;">
			<static3 :newstatic="njtatic"></static3>
		</div>
	   
	    <div class="homeDiv" style="width: 48%;">
			<static4 :newstatic="njtatic"></static4>
		</div>
		
		<div class="homeDiv" style="width: 48%;">
			<static5 :newstatic="njtatic"></static5>
		</div>
	</div>
</template>

<script>
	
	import bar from "./bar"; 
	import static1 from "./static1"; 
	import static2 from "./static2"; 
	import static3 from "./static3"; 
	import static4 from "./static4"; 
	import static5 from "./static5"; 
	export default {
		name:"home",
		data() {
			return {
				newstatic:[],
				njtatic:[],
				loading:false,
				loadmsg:'加载中......',
				columns: [
                     {
                        type: 'index',
                        width: 60,
                        title: '序号',
                        align: 'center'
                    },{
                        title: '年级',
                        key: 'NJ',
                        align: 'center', 
                    	sortable: true
                    }, {
                        title: '班级',
                        key: 'BJ',
                        align: 'center', 
                    	sortable: true
                    }, {
                        title: '书籍阅读总数',
                        key: 'PLANLOG',
                        align: 'center', 
                    	sortable: true,
                    }, {
                        title: '好词好句好段',
                        key: 'HCHJHD',
                        align: 'center',
                    	sortable: true,
                    },{
                        title: '章节读后感',
                        key: 'ZJDHG',
                        align: 'center',
                    	sortable: true,
                    }, {
                        title: '诗词背诵总数',
                        key: 'PLOG',
                        align: 'center', 
                    	sortable: true,
                    }, {
                        title: '总积分',
                        key: 'JFNUM',
                        align: 'center', 
                    	sortable: true,
                    }
                ],
			}
		},
		components: {
			bar,
			static1,
			static2,
			static3,
			static4,
			static5,
		},
		computed: {
		},
		
		methods: {
			BjDataStatic(){
				this.$http.get("/host/readbook/staticlog/BjDataStatic.html")
				.then(datas => {
					//取前十条数据
					this.newstatic=datas.newstatic.slice(0,10);
					this.njtatic=datas.njtatic;
				});
			}
		},
		mounted(){	
			this.BjDataStatic();
		}
	}
</script>


<style scoped="scoped">
	.homeDiv{
		float: left; 
		background:#eee;
		margin-top:5px;
		margin-bottom:5px;
		margin-left:1%;
		margin-right:1%;
		height:430px;	
	}
</style>



